<!--
  preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's
  center. The center of the circle will remain at the center of the mat-progress-spinner
  element containing the SVG. `focusable="false"` prevents IE from allowing the user to
  tab into the SVG element.
-->

<svg
  [style.width.px]="_elementSize"
  [style.height.px]="_elementSize"
  [attr.viewBox]="_viewBox"
  preserveAspectRatio="xMidYMid meet"
  focusable="false">

  <circle
    cx="50%"
    cy="50%"
    [attr.r]="_circleRadius"
    [style.animation-name]="'mat-progress-spinner-stroke-rotate-' + diameter"
    [style.stroke-dashoffset.px]="_strokeDashOffset"
    [style.stroke-dasharray.px]="_strokeCircumference"
    [style.stroke-width.%]="_circleStrokeWidth"></circle>
</svg>
